<template>
	<view class="upload-content">
		<view class="upload-item" v-for="(item, index) in videoList" :key="index">
			<video :src="item.filePath" :show-center-play-btn="false" class="upload-img marginRight" ></video>
			<view class="coverImage" @click="videoCanPlay">
				
			</view>
			<!-- 删除按钮 -->
			<image
				class="upload-del-btn"
				@click.stop.prevent="showDelModal(index, 0)"
				src=""
				mode="scaleToFill"
			></image>
			<!-- 进度 -->
			<view class="upload-progress" v-if="item.progress < 100">{{ item.progress }}%</view>
		</view>

		<image class="upload-add-btn marginRight" :src="img" v-if="rduLength > 0" @click="chooseVideo"></image>
		<mix-modal ref="mixModal" title="提示" text="确定要放弃这个视频么" @onConfirm="delImage"></mix-modal>

		<view class="video" v-if="showVideo">
			<video
				class="video"
				:direction="0"
				:controls="true"
				:show-center-play-btn="true"
				id="video"
				:src="video"
				@ended="play = false"
			>
				<view class="backCon row" @click="showVideo = false">
					<image src="/static/img/back.png" class="backIcon"></image>
					<view style="color: #FFFFFF;font-size: 24upx;">返回</view>
				</view>
			</video>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			videoContext: null,
			showVideo: false,
			videoList: [],
			video: "",
			play: false
		};
	},
	props: {
		count: {
			type: Number,
			default: 1 //单次可选择的图片数量
		},
		length: {
			type: Number,
			default: 1 //可上传总数量
		},
		index: {
			type: Number,
			default: 0
		},
		img: {
			type: String,
			default: "/static/img/loadimg.png"
		}
	},
	computed: {
		rduLength() {
			return this.length - this.videoList.length;
		}
	},
	methods: {
		setVideoList(list){
			list.forEach(item => {
				let obj={
					filePath:item,
				}
				this.videoList.push(obj);
			});
			this.video=list[0];
			console.log(this.videoList)
		},
		//  选择视频
		chooseVideo() {
			uni.chooseVideo({
				maxDuration: 60,
				count: 1,
				sourceType: ["camera", "album"],
				mediaType: ["image", "video"],
				success: res => {
					console.log(res);
					if (res.duration > 60) {
						this.$util.msg("视频时长不能超过60s!");
						return;
					}
					this.uploadVideo(res.tempFilePath);
				}
			});
		},
		//上传视频
		async uploadVideo(files) {
			console.log(files);
			const item = {
				filePath: files,
				progress: 0,
				type: 1
			};
			this.videoList.push(item);
			const result = await this.$uploadFile("user/upload", item);
			console.log(result);
			const res = JSON.parse(result);
			if (res.result == 0) {
				this.$util.msg("上传成功!");
				item.url = res.url;
				this.video = res.url;
			} else {
				this.$util.msg("上传失败，上传任务已终止");
				this.videoList.pop();
			}
		},
		//删除图片
		delImage(index) {
			this.videoList.splice(this.curIndex, 1);
			this.video="";
		},
		showDelModal(index, type) {
			this.curIndex = index;
			this.$refs.mixModal.open();
		},
		fullscreenclick() {
			this.showVideo = false;
		},
		videoCanPlay() {
			this.showVideo = true;
			// 获取 video 上下文 videoContext 对象

			setTimeout(() => {
				if (this.videoContext) {
					this.play ? this.videoContext.pause() : (this.videoContext.play(), this.videoContext.requestFullScreen());
				} else {
					this.videoContext = uni.createVideoContext("video", this);
					this.videoContext.requestFullScreen();
					this.videoContext.play();
					this.play = true;
				}
			}, 300);
		}
	}
};
</script>

<style lang="scss">
	.coverImage{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 156rpx;
		height: 156rpx;
	}
.marginRight {
	margin-right: 28rpx;
}
.backCon {
	position: fixed;
	top: 40upx;
	left: 40upx;
	background: #d5d5d5;
	border-radius: 50upx;
	padding: 10upx;
}
.backIcon {
	width: 32upx;
	height: 32upx;
}
.video {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
}
.upload-content {
	display: flex;
	flex-wrap: wrap;
	// background-color: #fff;
}

.upload-item {
	position: relative;
	width: 156rpx;
	height: 156rpx;
	// margin-right: 28rpx;
	margin-bottom: 24rpx;

	&:nth-child(4n) {
		margin-right: 0;
	}

	.upload-img {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.upload-del-btn {
		position: absolute;
		right: -16rpx;
		top: -14rpx;
		z-index: 5;
		width: 36rpx;
		height: 36rpx;
		border: 4rpx solid #fff;
		border-radius: 100px;
	}

	.upload-progress {
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		color: #fff;
		font-size: 24rpx;
		border-radius: 8rpx;
	}
}

.upload-add-btn {
	position: relative;
	float: left;
	width: 156rpx;
	height: 156rpx;
	margin-bottom: 24rpx;
	// margin-right: 24rpx;
	z-index: 85;
	border-radius: 8rpx;
	background: #f7f7f7;
}
</style>
